<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>setup</h2>
      <p>count: {{ count }}</p>
      <button @click="fn">count++</button>

      <hr />

      <input type="text" v-model="value" />
      <button @click="add">添加</button>
      <ul>
        <li v-for="(item, index) in list" :key="index">
          {{ item }} - <button @click="remove(index)">删除</button>
        </li>
      </ul>
    </div>

    <script src="../vue3.js"></script>
    <script>
      const { createApp, ref } = Vue;

      createApp({
        // 组合式api的写法，在这个对象里面就只有一个setup选项了
        // setup是最早执行的生命周期
        // (也可以和其他的选项一起使用)
        // setup函数是会自动执行的
        setup() {
          // 对于数据，希望有响应式，那么需要用ref包住
          // ref包住的值，在js里面，需要用.value才能拿到。在html里面不需要.value
          const count = ref(1);
          const fn = () => {
            // count++;
            console.log(count.value);
            count.value++;
          };

          const list = ref(["张三", "里斯", "王五"]);
          const value = ref("");
          const add = () => {
            if (value.value) {
              list.value.push(value.value);
              value.value = "";
            }
          };
          const remove = (i) => {
            list.value = list.value.filter((item, index) => index !== i);
          };

          // setup里面定义的内容，必须要return之后才能在template里面使用
          return {
            count: count,
            fn,
            list,
            value,
            list,
            add,
            remove,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
